<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<title>Toma de Decisiones</title>
		
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/custom.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/common.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/localize.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/decision_model.js"></script>
		 <script>
		 	
		 
		 	$(document).on("pagebeforeshow", "#tool",function(event){
		 		//alert(1);
		 		document.addEventListener("deviceready", onDeviceReady, true); 
		 	});
	 		
			function onDeviceReady() {
		        excecuteLocalization(["global","decmodel"]);
		    }
		 	
			var preloadedCriterias = new Array();
			
		 	var arrStepsToClear = new Array(3,5);
		 	var backStep = 1;
		 	var choices = 0;
		 	var criterias = 0;
		 	var currentCriteria = 0;
		 	var arrChoices = new Array();
		 	var arrChoicesWeights = new Array();
		 	var arrCriterias = new Array();
		 	var arrCriteriasWeights = new Array();
		 	var arrDataMatrix = new Array();
		 	var resultMargin = new Array(30,20,15);
		 	
		 	
		 	function selectDecisionType(decisionType){
		 		$("#step_0").fadeOut("slow", function(){
		 			if(!decisionType || decisionType == ""){// Generic decision
		 				$("#step_1").fadeIn();
		 			} else{
		 				setLocalizedTemplates(decisionType);
		 			}
	 			});
		 	}
		 	
		 	function setCriterias(){//step 2
		 		
		 		if(preloadedCriterias.length == 0){//Generic Decision
		 			criterias = $("#criteriaAmmountSelect").val();
		 		} else{
		 			criterias = preloadedCriterias.length;
		 		}
		 	
				var html="";
		 		
		 		for(i=0; i < criterias; i++){
		 			html+="Criterio " + i + ":";
		 			html+="<br>";
		 			
		 			if(preloadedCriterias.length == 0){
		 				html+="<input value='criterio " + i + "' id='criteria_" + i + "'  type='text' style='width:90%;'>";
		 				//html+="<input value='' id='criteria_" + i + "'  type='text' style='width:90%;'>";
		 			} else{
		 				html+="<input value='" + preloadedCriterias[i] + "' id='criteria_" + i + "'  type='text' style='width:90%;'>";
		 			}
		 			
		 		}
		 		
		 		html+="<button onclick='processCriterias();' data-theme='f'>" + $("#nextTag").html() + "</button>";
		 		
				$("#step_2").html(html);
		 		
		 		backStep = 1;
		 		
		 		$("#step_1").fadeOut("slow", function(){
		 			$("#resetButton").show();
		 			$("#step_2").trigger("create");
		 			$("#step_2").fadeIn();
		 		});
		 		
		 		
		 	}
		 	
		 	function processCriterias(){
		 		
		 		for(i=0; i < criterias; i++){
		 			arrCriterias[i] = $("#criteria_" + i).val();
		 			if($("#criteria_" + i).val() == ""){
		 				alert($("#must_complete_criteriaTag").html());
		 				return;
		 			}
		 		}
		 		//alert(arrCriterias);
		 		backStep = 2;
		 		weightCriterias();
		 	}
		 	
		 	
		 	function weightCriterias(){//Step 3
		 		
				var html= $("#weight_criteriaTag").html(); //"Pondere cada criterio";
		 		
		 		for(i=0; i < arrCriterias.length; i++){
		 			html+= "<label for='criteria_slider_" + i + "'>" + arrCriterias[i] + ":</label>";
		 			html+= "<input type='range' id='criteria_slider_" + i + "' name='criteria_slider_" + i + "' value='5' min='0' max='10' data-track-theme='c'/>";
		 		}
		 		
		 		html+="<button onclick='processCriteriasWeight();' data-theme='f'>" + $("#nextTag").html() + "</button>";
		 		$("#step_3").html(html).trigger("create");
		 		//alert($("#step_3").html());
		 		
		 		$("#step_2").fadeOut("slow", function(){
		 			$("#resetButton").show();
		 			$("#step_3").fadeIn();
		 		});
		 	}
		 	
		 	function processCriteriasWeight(){
		 		
		 		//var arrTmp = new Array();
		 		
		 		for(i=0; i < arrCriterias.length; i++){
		 			$("#dataMatrix").append("<input type='hidden' id='criteriasWeight_" + i + "' value='" + $("#criteria_slider_" + i).val() + "'>");
		 		}
		 		//alert($("#dataMatrix").html());
		 		
		 		$("#step_3").fadeOut("slow", function(){
		 			$("#resetButton").show();
		 			$("#step_4").fadeIn();
		 		});
		 	}
		 	
		 	function setChoices(){//step 4
		 		
		 		choices = $("#choicesAmmountSelect").val();
		 		//alert(choices);
		 		
		 		var html="";
		 		for(i=0; i < choices; i++){
		 			html+= $("#alternativeTag").html() + " " + i + ":";
		 			html+="<br>";
		 			html+="<input value='casa " + i + "' id='choice_" + i + "'  type='text' style='width:90%;'>";
		 			//html+="<input value='' id='choice_" + i + "'  type='text' style='width:90%;'>";
		 		}
		 		
		 		html+="<button onclick='setAmmountAndStart();' data-theme='f'>" + $("#startTag").html() + "</button>";
		 		
		 		$("#step_5").html(html);
		 		
		 		backStep = 3;
		 		
		 		for(i=0; i < choices; i++){
		 			$("#choice_" + i).trigger("create");
		 		}
		 		
		 		$("#step_4").fadeOut("slow", function(){
		 			$("#resetButton").show();
		 			$("#step_5").trigger("create");
		 			$("#step_5").fadeIn();
			 		$("#backButton").fadeIn();
		 		});
		 	}
		 	
		 	function setAmmountAndStart(){//step 5
		 		
		 		for(i=0; i < choices; i++){
		 			arrChoices[i] = $("#choice_" + i).val();
		 			if($("#choice_" + i).val() == ""){
		 				alert($("#must_completeTag").html());
		 				return;
		 			}
		 		}
		 		//alert(arrChoices);
		 		backStep = 4;
		 		
		 		currentCriteria = 0;
		 		var html = getHTMLForCriteria(currentCriteria);
		 		//alert(html);
		 		$("#step_5").fadeOut("slow", function(){
			 			$("#processContainer").html(html).trigger("create");
			 			$("#processContainer").fadeIn();
			 			$("#resetButton").show();
				 		$("#backButton").hide();
		 		});
		 	}
		 	
		 	function processLoop(){
		 		//alert("processing currentCriteria: " + currentCriteria + ", criterias: " + criterias);
		 		//alert($("#processContainer").html());
		 		$("#processContainer").fadeOut("slow", function(){
		 			
	 				for(i=0; i < arrChoices.length; i++){
	 					$("#dataMatrix").append("<input type='hidden' id='criteriaMatrix_" + currentCriteria + "_" + i + "' value='" + $("#choice_slider_" + i).val() + "'>");
	 				}
 					
	 				//alert($("#dataMatrix").html());
		 			
	 				//alert("currentCriteria: " + currentCriteria + ", criterias: " + criterias);
	 				
		 			if(currentCriteria == (criterias-1)){//process finished
		 				//alert("FIN");
				 		currentCriteria = 0;
				 		processResult();
		 			} else{
		 				currentCriteria++;
				 		var html = getHTMLForCriteria(currentCriteria);
				 		//alert(html);
			 			$("#processContainer").html(html).trigger("create");
			 			$("#processContainer").fadeIn();
		 			}
		 		});
		 			
		 	}
		 	
		 	function processResult(){
		 		
		 		var arrChoiceSum = new Array();
		 		var higher = 0;
		 		var choiceSelected = 0;
		 		var html = '';
		 		var resultText = "";

	 			html += "<div class='resultTitle'>";
	 			html += "	<p>";
	 			html += 		$("#selected_choiseTag").html() + "&nbsp;" +"@@##@@";
	 			html += "	</p>";
	 			html += "</div>";
		 		
		 		for(i=0; i < arrChoices.length; i++){
			 		var tmp = 0;
		 			for(j=0;j < arrCriterias.length;j++){
		 				var weight = getWeightForCriteria(j);
		 				tmp += parseInt(getWeightForChoiceCriteria(i,j)) * weight;
		 			}
		 			//alert("la alternativa: " + i + ", que es: " + arrChoices[i] +" vale: " + tmp);
		 			arrChoiceSum[i] = tmp;
		 			//alert("tmp vale: " + tmp + ", higher vale: " + higher);
		 			if(tmp >= higher){
		 				higher = tmp;
		 				choiceSelected = i;
		 			}
		 			
		 			html += "<div class='result'>";
		 			html += "	<p>";
		 			html += "		Alternativa: " + arrChoices[i];
		 			html += "		<br><br>";
		 			html += "		Puntaje: " + tmp;
		 			html += "	</p>";
		 			html += "";
		 			html += "</div>";
		 		}
		 		
		 		html = html.replace("@@##@@", arrChoices[choiceSelected]);
		 		
		 		resultText = getResultText(arrChoiceSum);
		 		
		 		html += "<div class='result'>" + resultText + "</div>";
		 		
		 		$("#processContainer").html(html);
 				$("#backButton").hide();
	 			$("#resetButton").attr('value', $("#start_againTag").html());
	 			$("#processContainer").fadeIn();
		 	}
		 	
		 	function getWeightForCriteria(criteria){
		 		var value = $("#criteriasWeight_" + criteria).val();
		 		//alert("For criteria: " + "#criteriasWeight_" + criteria + " el peso es:" + value);
		 		return value;
		 	}
		 	
		 	function getWeightForChoiceCriteria(choice, criteria){
		 		var value = $("#criteriaMatrix_" + criteria + "_" + choice).val();
		 		//alert("For choice: " + "#criteriaMatrix_" + criteria + "_" + choice + " el valor es:" + value);
		 		return value;
		 	}
		 	
		 	function getResultText(arrChoiceSum){
		 		
		 		var arrChoiceSumOrdered = arrChoiceSum;
		 		arrChoiceSumOrdered.sort(function(a,b){return b-a});
		 		
		 		//get difference between first and seccond choices
				var dif_1_2 = getDif(arrChoiceSumOrdered[0], arrChoiceSumOrdered[1]);
		 		//alert("dif_1_2: " + dif_1_2);
		 		
		 		if(dif_1_2 >= resultMargin[0]){//30	
		 			//alert("#resultText_1: " + $("#resultText_1"));
		 			return $("#resultText_1").html();
		 		} else if(dif_1_2 <= resultMargin[1] && arrChoiceSum.length > 2 ){//20
					var dif_2_3 = getDif(arrChoiceSumOrdered[1], arrChoiceSumOrdered[2]);
			 		//alert("dif_2_3: " + dif_2_3);
			 		if(dif_2_3 >= resultMargin[0]){//30	
			 			alert("#resultText_2: " + $("#resultText_2"));
		 				return $("#resultText_2").html();		 			
			 		}
		 		} else if(dif_1_2 <= resultMargin[2] && dif_2_3 <= resultMargin[2] && arrChoiceSum.length > 2 ){//15
			 		//alert("dif_2_3: " + dif_2_3);	
		 			//alert("#resultText_3: " + $("#resultText_3"));
		 			return $("#resultText_3").html();
		 		} else{	
		 			//alert("#resultText_4: " + $("#resultText_4"));
		 			return $("#resultText_4").html();
		 		}
		 	}		
		 	
		 	function getDif(val_1, val_2){
		 		var dif = val_1 - val_2;
		 		dif = dif * 100 / val_1;
		 		return dif;
		 	} 
		 	
		 	function getHTMLForCriteria(currentCriteria){
		 		
		 		var html = arrCriterias[currentCriteria];
		 		
		 		for(i=0; i < arrChoices.length; i++){
		 			html+= "<label for='choice_slider_" + i + "'>" + arrChoices[i] + ":</label>";
		 			html+= "<input type='range' id='choice_slider_" + i + "' id='choice_slider_" + i + "' value='5' min='0' max='10' />";
		 		}
		 		html+="<button onclick='processLoop();' data-theme='f'>" + $("#nextTag").html() + "</button>";
		 		return html;
		 	}
		 	
		 
		 	function resetProces(){
		 		
		 		arrChoices = new Array();
		 		arrCriterias = new Array();
		 		
		 		//alert(arrStepsToClear);
		 		for(i=0;i<arrStepsToClear.length;i++){
		 			//alert($("#step_" + arrStepsToClear[i]).html());
			 		$("#step_" + arrStepsToClear[i]).html("");
		 		}
		 		
	 			$("#resetButton").hide();
	 			$("#backButton").hide();
	 			$("#dataMatrix").html("");
		 		
		 		$(".step").hide("slow",function(){
		 			$("#step_0").fadeIn();
		 			backStep = 0;
		 		});
		 	}
		 	
		 	function goBack(){
		 		
		 		//alert("gointo to: " + backStep);
		 		
		 		var currentStep = backStep + 1;
		 		
		 		$("#step_" + currentStep).hide("slow",function(){
		 			$("#step_" + backStep).fadeIn("slow");
		 			//alert("step_" + backStep + " content:" + $("#step_" + backStep).html());
		 			if(backStep==1){
				 		$("#backButton").hide();
				 		$("#resetButton").hide();
		 			} else{
			 			backStep--;
		 			}
		 		});
		 	}
		 	
		 </script>
	</head>
<body style="text-align:center;">

<div  data-role="page" style="display:none;" id="tool"> 
	
	<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="menu-panel" data-theme="a">

		<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
			<li data-icon="delete" style="background-color:#111;">
				<a href="#header" data-rel="close"><span data-translate="localize">global.close_menu</span></a>
			</li>
			<li>
				<a href="javascript:backToHome();"><span data-translate="localize">global.go_home</span></a>
			</li>
			<li>
				<a href="javascript:window.location.href='settings.html'"><span data-translate="localize">global.settings</span></a>
			</li>
			<li>
				<a href="javascript:exitAPP();"><span data-translate="localize">global.exit</span></a>
			</li>
		</ul>
		<span data-translate="localize" id="confirm_msgTag" style="display:none;">global.confirm_msg</span>
		<!-- panel content goes here -->
	</div><!-- /panel -->

	<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.png" alt="Logo" height="35" width="35" style="float:left; display:inline"/>
		<a href="javascript:openMenu();" data-icon="gear" class="ui-btn-right" id="openMenuButton"><span data-translate="localize">global.menu</span></a>
	</div> 
	<div  data-role="content">
	
		<div class="step" id="step_0" style="display:block;">
			<p>
				<span data-translate="localize">p_1</span>
				<br><br>
				<span data-translate="localize">choose_decision</span>:
			</p>
			<p>
				<button onclick="selectDecisionType('');" data-theme="f"><span data-translate="localize">generic</span></button>
				<button onclick="selectDecisionType('house');"><span data-translate="localize">house</span></button>
				<button onclick="selectDecisionType('apartment');"><span data-translate="localize">apartment</span></button>
				<button onclick="selectDecisionType('car');"><span data-translate="localize">car</span></button>
				<button onclick="selectDecisionType('notebook');"><span data-translate="localize">notebook</span></button>
				<button onclick="selectDecisionType('tv');"><span data-translate="localize">tv</span></button>
				<button onclick="selectDecisionType('cellphone');"><span data-translate="localize">cellphone</span></button>
			</p> 
		</div>
	
		<div class="step" id="step_1" style="display:none;">
		
			<div data-role="fieldcontain">
				<label for="criteriaAmmountSelect" class="select"><span data-translate="localize">criteria_amount</span></label>
				<select name=criteriaAmmountSelect id="criteriaAmmountSelect">
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
			</div>
			<button onclick="setCriterias();"><span data-translate="localize">next</span></button>
		</div>
		<div id="resetButton" style="display:none;" data-theme="f"><button onclick="resetProces();"><span data-translate="localize">reset</span></button></div>
		
		<div class="step" id="step_2" style="display:none;"></div>
		<div class="step" id="step_3" style="display:none;"></div>
		
		<div class="step" id="step_4"  style="display:none;">
		
			<div data-role="fieldcontain">
				<label for="choicesAmmountSelect" class="select"><span data-translate="localize">alternatives_amount</span></label>
				<select name=choicesAmmountSelect id="choicesAmmountSelect">
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
				</select>
			</div>
			
			<button onclick="setChoices();" data-theme="f"><span data-translate="localize">start</span></button>
		</div>
		
		<div class="step" id="step_5" style="display:none;"></div>
		
		<div class="step" id="processContainer" style="display:none;"></div>
		
		<div id="backButton" style="display:none;"><button onclick="goBack();"><span data-translate="localize">back</span></button></div>
		<div id="dataMatrix" style="display:none;"></div>
		
		<div id="alternativeTag" style="display:none;"><span data-translate="localize">alternative</span></div>
		<div id="alternatives_amountTag" style="display:none;"><span data-translate="localize">alternatives_amount</span></div>
		<div id="nextTag" style="display:none;"><span data-translate="localize">next</span></div>
		<div id="startTag" style="display:none;"><span data-translate="localize">start</span></div>
		<div id="must_completeTag" style="display:none;"><span data-translate="localize">must_complete</span></div>
		<div id="criteriaTag" style="display:none;"><span data-translate="localize">criteria</span></div>
		<div id="must_complete_criteriaTag" style="display:none;"><span data-translate="localize">must_complete_criteria</span></div>
		<div id="start_againTag" style="display:none;"><span data-translate="localize">start_again</span></div>
		<div id="weight_criteriaTag" style="display:none;"><span data-translate="localize">weight_criteria</span></div>
		<div id="selected_choiseTag" style="display:none;"><span data-translate="localize">selected_choise</span></div>
		<span data-translate="localize" id="resultText_1" style="display:none;">resultText_1</span></div>
		<span data-translate="localize" id="resultText_2" style="display:none;">resultText_2</span>
		<span data-translate="localize" id="resultText_3" style="display:none;">resultText_3</span>
		<span data-translate="localize" id="resultText_4" style="display:none;">resultText_4</span>
		
	</div> 
	<!-- 
	<div  data-role="footer" data-position="fixed">
		<button class="button-main-small" onclick="exitAPP();"><span data-translate="localize">global.exit</span></button>
	</div>
	-->
</div>
</body>
</html>